@use "sass:math"; //使用数学模块



// @import 可以在一个sass文件中 引入另一个sass文件 
// 注意:如果一个sass文件只做引入,并不想被编译 可以在文件名前加 前缀 _xxx
@import "common/variable.scss";
@import "common/mixin.scss";
@import "common/extend.scss";
@import "common/function.scss";
@import "common/reset.scss";




html {
    font: 14px/16px "微软雅黑";
}

// scss嵌套:
// 一般情况下，sass在解开一个嵌套规则时就会把父选择器 通过一个空格连接到子选择器的前边 => 包含选择器
.header {
    @include typeAreaCenter();
    // height: 40px;
    @include textCenter(40px);
    background-color: $grey;

    // scss插值语句: #{}   => 可以在选择器 css属性名 css属性值中拼接变量
    border-#{$side}: 1px solid #333;

    // & 被替换为父选择器 => .header-nav
    &-nav {
        float: left;
        line-height: 40px;

        .nav {
            // display: flex;

            // 父选择器修饰符: 当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换：
            // .header .header-nav .nav 替换 &    > li 
            &>li {
                float: left;
                padding: 0 20px;
                position: relative;

                // & => .header .header-nav .nav > li
                &:hover {
                    background-color: $hot;

                    .subNav {
                        display: block;
                    }
                }

                .subNav {
                    width: 100%;
                    position: absolute;
                    left: 0;
                    top: 40px;
                    background-color: #99CCFF;
                    display: none;
                }
            }

        }
    }

    &-search {
        float: right;
        display: flex;
        margin-top: 2px;
        border: 1px solid #666;
        border-radius: 4px;
        overflow: hidden;
        margin-right: 10px;

        .searchCon {
            width: 250px;
            height: 32px;
            padding: 0;
            border: 0;
            outline: none;
        }

        .searchBtn {
            display: block;
            width: 32px;
            height: 32px;
            background-color: $warm;
        }
    }
}




// 计算属性: sass语法中可以使用算术运算符
// 加法: 可以一个有单位 一个没有单位, 或者两个都有单位
// 减法: 可以一个有单位 一个没有单位, 或者两个都有单位
// 乘法: 一个有单位,一个没有单位(几倍)    两个都有单位报错200px*2px => 400px*px
// 除法: 一个有单位,一个没有单位 ,  两个都有单位(倍数处理 => 单位舍去  200px/2px = 100)


.swiper {
    @include typeAreaCenter();
}

.section {
    width: 5*$typeArea;
}

.section .part {
    width: $typeArea;
}

.box {
    width: 200px + 20px;
    width: 200px - 20px;
    width: 200px * 2;
    // width: math.div(200px, 2);
    width: calc(200px / 2);
    // width: calc(200px / 2px);

    width: pxToRem(720px);

    border: 1px solid #333;
}


.container {
    @include typeAreaCenter();
}